<template>
  <div id="user_center">
    <main>
      <div class="fun_l">
        <div class="ava_b">
          <div class="avator">
            <img
              :src="`http://114.132.236.89:8888/static/${userList.headphoto}`"
              alt="头像"
            />
          </div>
          <div class="user_name">
            {{ userList.loginname }}
          </div>
          <el-aside
            width="200px"
            style="background-color: rgb(238, 241, 246); margin-top: 15px"
          >
            <el-menu :default-active="default_active">
              <el-menu-item index="1" @click="default_active = '1'"
                >个人信息</el-menu-item
              >
              <el-menu-item index="2" @click="default_active = '2'"
                >个人订单</el-menu-item
              >
            </el-menu>
          </el-aside>
        </div>
      </div>
      <div class="fun_r">
        <div class="content">
          <div class="user_mess" v-show="default_active == 1">
            <p>
              用户头像：<img
                style="width: 100px; height: 100px; object-fit: cover"
                :src="`http://114.132.236.89:8888/static/${userList.headphoto}`"
                alt=""
              />
            </p>
            <p>用户名称：{{ userList.loginname }}</p>
            <p>用户年龄：{{ userList.age }}</p>
            <p>用户爱好：{{ userList.habby }}</p>
            <p>用户邮箱：{{ userList.email }}</p>
            <p>
              <el-button type="primary" @click="dialogVisible = true"
                >修改信息</el-button
              >
            </p>
          </div>
          <div class="user_order" v-show="default_active == 2">
            <user-order :orderList="orderList"></user-order>
          </div>
        </div>
      </div>
    </main>

    <!-- 修改信息 -->
    <el-dialog
      title="修改信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- :rules="rulesFormList" -->
      <el-form
        ref="orderList"
        :model="userList"
        :rules="rulesFormList"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="用户Id" prop="userid">
          <el-input
            v-model="userList.userid"
            placeholder="用户Id"
            disabled
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="用户名称" prop="loginname">
          <el-input
            v-model="userList.loginname"
            placeholder="请输入用户名称"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="用户头像" prop="headphoto">
          <input type="file" ref="fileImage" />
          <!-- <el-image :src="up_b_img"></el-image> -->
        </el-form-item>
        <el-form-item label="用户年龄" prop="age">
          <el-input
            v-model="userList.age"
            placeholder="请输入用户年龄"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户爱好" prop="habby">
          <el-input
            v-model="userList.habby"
            placeholder="请输入用户爱好"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="用户邮箱" prop="email">
          <el-input
            v-model="userList.email"
            placeholder="请输入用户邮箱"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="用户密码" prop="pwd">
          <el-input
            v-model="userList.pwd"
            placeholder="请输入用户登录密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="updataMess('orderList')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import UserOrder from "../components/UserCenter/UserOrder.vue";
export default {
  data() {
    return {
      //修改信息
      dialogVisible: false, //显示/隐藏
      default_active: "1",
      up_b_img: undefined,
      //用户信息
      userList: {
        userid: undefined,
        loginname: undefined,
        pwd: undefined,
        age: undefined,
        habby: undefined,
        email: undefined,
        headphoto: undefined,
      },
      //用户所有的订单信息
      orderList: [],
      rulesFormList: {
        userid: [{ required: true }],
        //   loginname: [
        //       { required: true, message: '请输入活动名称', trigger: 'blur' },
        //       { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        //     ],
        pwd: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        age: [{ required: true, message: "请输入用户年龄", trigger: "blur" }],
        habby: [
          { required: true, message: "请输入用户爱好", trigger: "blur" },
          {
            min: 1,
            max: 18,
            message: "长度在 1 到 18 个字符",
            trigger: "blur",
          },
        ],
        //   email: [
        //       { required: true, message: '请输入正确的邮箱', trigger: 'blur' },
        //       { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        //     ],
        //   headphoto: [
        //       { required: true, message: '请输入活动名称', trigger: 'blur' },
        //       { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        //     ],
      },
    };
  },
  components: { UserOrder },
  watch: {
    "$route.query.Active"() {
      this.default_active = this.$route.query.Active;
    },
  },
  methods: {
    /* handleFile(e) {
      // let file = e.target.files[0];
      let formData = new FormData();
      Array.from(e.target.files).map((item) => {
        formData.append("file", item); //将每一个文件图片都加进formdata
      });
      this.up_b_img = formData;
    }, */
    updataMess(orderList) {
      this.$refs[orderList].validate((valid) => {
        if (valid) {
          // let obj = {
          //   userid: this.userList.userid,
          //   pwd: this.userList.pwd,
          //   habby: this.userList.habby,
          //   file:this.up_b_img,
          //   age: this.userList.age,
          // };
          let file;
          if (this.$refs.fileImage.files.length > 0) {
            //修改小图片了
            file = this.$refs.fileImage.files[0];
          } else {
            //没修改小图片
            file = "";
          }
          let formData = new FormData();
          formData.append("userid", this.userList.userid);
          formData.append("pwd", this.userList.pwd);
          formData.append("habby", this.userList.habby);
          formData.append("file", file);
          formData.append("age", this.userList.age);
          this.$axios({
            method: "post",
            url: "/tUser/updateuserinfobyid",
            data: formData,
            headers: {
              "Content-Type": "multipart/form-data",
            },
          }).then((res) => {
            console.log("@@@@", res);
            this.$message({
              showClose: true,
              duration: 1200,
              message: "恭喜信息成功！",
              type: "success",
              onClose: () => {
                this.dialogVisible = false;
                this.getUserMess();
              },
            });
          });
        } else {
          this.$message({
            message: "表单验证不通过，请输入正确的数据",
            type: "warning",
            duration: 2000,
          });
        }
      });
    },
    handleClose() {
      this.getUserMess();
      this.$confirm("确认关闭？").then(() => {
        this.dialogVisible = false;
      });
      // this.$refs.orderList.resetFields();
    },
    //获取用户订单信息
    getUserOrderMess() {
      let userid = this.$store.state.userid;
      this.$axios.get(`/tOrder/selectbyuserid?userid=${userid}`).then((res) => {
        this.orderList = res.data.data;
      });
    },
    //获取用户信息
    getUserMess() {
      let userid = this.$store.state.userid;
      this.$axios.get(`/tUser/selectbyid?userid=${userid}`).then((res) => {
        this.userList = res.data.data;
        this.$bus.$emit("setAvator", res.data.data.headphoto);
      });
    },
  },
  created() {
    //获取用户信息
    this.getUserMess();
  },
  mounted() {
    if (this.$store.state.LoginStatus == 0) {
      alert("请先登录");
      this.$router.go(-1);
      return;
    }
    //判断从哪里跳转过来的
    if (this.$route.query.Active) {
      this.default_active = this.$route.query.Active;
    }
    //获取用户订单信息
    this.getUserOrderMess();
  },
};
</script>
<style lang="less" scoped>
/* @import url("../css/usercenter.css"); */
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
#user_center {
  background-color: #f9f9f9;
  main {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    height: 500px;
    background-color: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    .fun_l {
      flex: 1;
      // background-color: pink;
      .ava_b {
        padding-top: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .avator {
          width: 110px;
          height: 110px;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
          }
        }
        .user_name {
          margin-top: 15px;
        }
      }
    }
    .fun_r {
      flex: 5;
      display: flex;
      justify-content: center;
      align-items: center;
      //  background-color: orange;
      .content {
        width: 100%;
        padding: 50px;
        // box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        p {
          margin: 25px 0;
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>